<template>
  <el-checkbox-group v-model="checkList" v-bind="$attrs" :label="groupLabel">
    <el-checkbox v-for="item in props.labelList" :label="item" />
  </el-checkbox-group>
</template>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  label: {
    type: String,
    default: '多选框'
  },
  labelList: {
    type: Array,
    default: ['多选框1']
  },
  modelValue: {
    type: Array,
    default: []
  }
})
const checkList = ref([])
const groupLabel = ref(props.label)
watch(() => props.modelValue, (val) => {
  if (Array.isArray(val)) {
    checkList.value = val
  } else if (val) {
    checkList.value.push(val)
  }
}, {
  immediate: true
})

watch(() => checkList.value, (val) => {
  emit('update:modelValue', val)
})


</script>

<style lang="scss" scoped></style>